<!--附件列表-->
<style lang="less">
  @import 'cms_tagslist.less';
</style>

<template>
  <div id="cms_tagslist">
    <Modal v-model="tagsListModel":z-index="599"  :footer-hide="true" draggable class="tagsListModel">
      <p slot="header" style="text-align: left">
        <span>TAG标签选择</span>
      </p>
      <div style="text-align: center">
        <Row>
          <Col span="24">
            <Card style="margin-bottom: 10px">
              <Form inline ref="searchConf" :model="searchConf" class="cms_contentTable" @submit.native.prevent>
                <FormItem prop="name">
                  <Input v-model="searchConf.name" clearable placeholder="请输入标签名称..." style="width: 250px"  @on-enter="search"></Input>
                </FormItem>
                <FormItem>
                  <Button type="primary" @click="search">查询</Button>
                </FormItem>
                <FormItem>
                  <Button @click="schReset('searchConf')">重置</Button>
                </FormItem>
                <FormItem>
                  <Button type="primary" @click="add">新增</Button>
                </FormItem>
              </Form>
            </Card>
          </Col>
          <Col span="24">
            <Card>
              <div>
                <Table :loading="tableLoading" :columns="columnsList" :data="tableData" border disabled-hover>
                  <template slot-scope="{ row, index }" slot="handle">
                    <Button type="primary"  @click="checkTag(row)">选择</Button>
                  </template>
                </Table>
              </div>
              <div class="margin-top-15" style="text-align: center">
                <Page :total="tableShow.listCount" :current="tableShow.currentPage"
                      :page-size="tableShow.pageSize" @on-change="changePage"
                      @on-page-size-change="changeSize" show-elevator show-sizer show-total></Page>
              </div>
            </Card>
          </Col>
        </Row>
      </div>
    </Modal>
    <!--tag 新增-->
    <Modal v-model="modalSetting.show" draggable width="668" @on-visible-change="doCancel">
      <p slot="header" style="color:#2d8cf0;">
        <Icon type="md-information-circle"></Icon>
        <span>{{formItem.id ? '编辑' : '新增'}}菜单</span>
      </p>
      <Form ref="myForm" :rules="ruleValidate" :model="formItem" :label-width="80">
        <FormItem label="标签名称" prop="name">
          <Input v-model="formItem.name" placeholder="请输入标签名称"></Input>
        </FormItem>
        <FormItem label="文档数量" prop="info">
          <InputNumber :min="0" v-model="formItem.num" title="文档数量 | 非必填" placeholder="文档数量 | 非必填" style="width: 220px"></InputNumber>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="cancel" style="margin-right: 8px">取消</Button>
        <Button type="primary" @click="submit" :loading="modalSetting.loading">确定</Button>
      </div>
    </Modal>

  </div>
</template>

<script>
  import { CmsTagsListIndex, CmsTagsListAdd, CmsTagsListEdit } from '@/api/cms/tags'

  export default {
    name: 'cms_tagslist',
    data () {
      return {
        tagsListModel: false, // 列表选择model
        columnsList: [
          {
            title: '标签ID',
            type: 'id',
            width: 100,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('span', {
                }, params.row.id)
              ])
            }
          },
          {
            title: '标签名称',
            // width: 100,
            align: 'center',
            key: 'name',
            render: (h, params) => {
              return h('div', [
                h('span', {
                }, this.isNull(params.row.name))
              ])
            }
          },
          {
            title: '文档数量',
            // width: 100,
            align: 'center',
            key: 'num',
            render: (h, params) => {
              return h('div', [
                h('span', {
                }, this.isNull(params.row.num))
              ])
            }
          },
          {
            title: '创建日期',
            align: 'center',
            key: 'createTime',
            // width: 150,
            render: (h, params) => {
              return h('div', [
                h('span', {
                  /* style: {
                     color: '#FD6732'
                   }*/
                }, this.isNull(params.row.createTime))
              ])
            }
          },
          {
            title: '操作',
            align: 'center',
            key: 'handle',
            slot: 'handle'
          }
        ],
        tableLoading: false,
        tableData: [],
        tableShow: {
          currentPage: 1,
          pageSize: 10,
          listCount: 0
        },
        searchConf: {
          name: ''
        },
        modalSetting: {
          show: false,
          loading: false,
          index: 0
        },
        formItem: {
          id: 0,
          name: '',
          num: 0
        },
        ruleValidate: {
          name: [
            { required: true, message: '菜单名称不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    created () {
    },
    methods: {
      init () {
      },
      // 父组件传过来的方法
      showTagstList () {
        this.getList()
        this.tagsListModel = true
      },
      // 新增
      add () {
        this.modalSetting.show = true
      },
      // 查询
      search () {
        this.tableShow.currentPage = 1
        this.getList()
      },
      // 重置
      schReset (name) {
        this.$refs[name].resetFields();
        this.getList()
      },
      // 分页
      changePage (page) {
        this.tableShow.currentPage = page
        this.getList()
      },
      changeSize (size) {
        this.tableShow.pageSize = size
        this.getList()
      },
      // 选择TAG
      checkTag (row) {
        this.$emit('childTag',row)
        this.tagsListModel = false
      },
      // 获取列表
      getList () {
        let vm = this
        vm.tableLoading = true
        CmsTagsListIndex(
          {
            page: vm.tableShow.currentPage,
            size: vm.tableShow.pageSize,
            name: vm.searchConf.name,
          }
        ).then(response => {
          let res = response.data
          vm.tableLoading = false
          if (res.code === 1) {
            vm.tableData = res.data.list
            vm.tableShow.listCount = res.data.count
          } else {
            vm.$Message.error(res.msg)
          }
        })
      },
      // 新增或编辑提交
      submit () {
        let self = this
        this.$refs['myForm'].validate((valid) => {
          if (valid) {
            // self.modalSetting.loading = true;
            if (this.formItem.id === 0) {
              CmsTagsListAdd(this.formItem).then(response => {
                if (response.data.code === 1) {
                  self.$Message.success(response.data.msg)
                  self.getList()
                  self.cancel()
                } else {
                  self.$Message.error(response.data.msg)
                }
              }).catch(err => {
                console.log(err)
              })
            } else {
              console.log(this.formItem)
              CmsTagsListEdit(this.formItem).then(response => {
                if (response.data.code === 1) {
                  self.$Message.success(response.data.msg)
                  self.getList()
                  self.cancel()
                } else {
                  self.$Message.error(response.data.msg)
                }
              })
            }
          }
        })
      },
      cancel () {
        this.modalSetting.show = false
      },
      doCancel (data) {
        if (!data) {
          this.formItem.id = 0
          this.$refs['myForm'].resetFields()
          this.modalSetting.loading = false
          this.modalSetting.index = 0
        }
      },
      isNull (e) {
        if (e === '' || e === undefined || e === 'undefined' || e === null || e === 'null' )
          return '--'
        else
          return e
      }
    },
    filters:{
      // 显示时间格式化
      timeType (e) {
        let moment = require('moment')
        let time = moment(e).format('YYYY-MM-DD HH:mm:ss')
        return time
      }
    }
  }
</script>
